import React, { useEffect, useState } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import http from "../../api/http";
import { Image, NavBar } from "antd-mobile";
import "./index.css";
import { ProductCard, Tag, Button } from "react-vant";
import { UploadOutline,HeartFill } from 'antd-mobile-icons'
import { SubmitBar } from "react-vant";

function Index() {
  const { state } = useLocation();
  console.log(state);
  // 3.点击列表项，跳转到详情页，详情页获取路由参数id，根据id请求详情数据渲染在页面中
  const navigate = useNavigate();
  const [deitle, setdeitle] = useState({});
  const getdeitle = async (id) => {
    const res = await http.get("/api/list/detail", { params: { id } });
    const { data } = res.data;
    console.log(data);
    setdeitle(data);
  };
  useEffect(() => {
    getdeitle();
  }, []);

  const handletoOrder=()=>{
    navigate("/order",{state:state})
  }
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}> </NavBar>
      <Image src={state.image} width="100%" height="300px"></Image>
      <div className="wenben1">
        <h2>厘清的地平线上的艺术魅力：视觉创意集聚的未来空间</h2>
      </div>
      <div className="dingwei">
        <UploadOutline />
        <HeartFill />
      </div>
      <div>
        <ProductCard price={state.price} desc="描述信息" title={state.title} />
      </div>

      <div className="demo-submit-bar">
        <SubmitBar price={(state.price)*100} buttonText="立即购票" onSubmit={()=>handletoOrder()}/>
      </div>
    </div>
  );
}

export default Index;
